<template>
    <div class="guessLike">
        <div class="item" v-for="(v, k) in guessLike" :key="'guessLike'+k" @click="loadDetailsPage(v)">
            <div class="images" :style="`background-image: url(${v.img})`"> 
                <div class="icon"></div>
            </div>
            <!-- 标签类 start -->
            <div class="page-bottom" v-if="lable">
                <div class="label">
                    <span v-for="(item, index) in v.props" :key="'i'+index">{{item}}</span>
                </div>
                <div class="price">
                    <div>￥{{v.price}}</div>
                    <div>{{v.cfav}}<span class="iconfont">&#xe689;</span></div>
                </div>
            </div>
            <!-- 标签类 end -->
            <!-- 标题类 start -->
            <div v-if="!lable">
                <div class="title">{{ v.title }} 
                    <div class="icon">...</div>
                </div>
                <div class="bottom">
                    <div class="price"> ￥{{v.price}} </div>
                    <div class="follow">
                        <span class="num">{{ v.cfav }}&nbsp;</span>
                        <span class="iconfont">&#xe689;</span>
                    </div>
                </div>
            </div>
            <!-- 标题类 end -->
        </div>        
    </div>
</template>

<script>
export default {
    props:{
        guessLike:{},
        lable:{
            default:false,
        }
    },
    methods:{
        loadDetailsPage(v){
            sessionStorage.setItem("shopping",JSON.stringify(v));
            this.$router.push("DetailsPage");
        }
    }

}
</script>

<style lang="less" scoped>
    .guessLike{
        width: 100%;
        padding: 0px 10px;
        box-sizing: border-box;
        display: flex;
        flex-flow: row wrap;
        .item{
            width: 50%;
            padding: 0px 10px;
            box-sizing: border-box;
            position: relative;
            margin-bottom: 30px;
            .images{
                border-radius: 15px 15px 0px 0px;
                width: 100%;
                height: 0px;
                padding-bottom: 150%;
                background-repeat: no-repeat;
                background-size: auto 100%;
                background-position: center;
                background-color: @white;
                position: relative;
                .icon{
                    background-image: url('../assets/btn.png');
                    position: absolute;
                    right: 10px;
                    bottom: 10px;
                    width: 70px;
                    height: 70px;
                    background-size: 100%;
                    background-position: center;
                }
            }
            //标签类
            .page-bottom{
                padding: 10px;
                min-height:95px;
                .label{
                    height: 120px;
                    overflow: hidden;
                    span{
                        display: inline-block;
                        font-size: 26px;
                        padding:6px 15px;
                        border-radius: 5px;
                        margin:5px 10px 5px 0px;
                        background-color: #d8e4ea;
                        color: #70828c;
                    }
                }
                .price{
                    margin-top:20px;
                    line-height: 50px;
                    >div:first-child{
                        display: inline-block;
                        font-size: 40px;
                        font-weight: 600;
                    }
                    >div:last-child{
                        float: right;         
                        font-size: 38px;
                        color: @99;
                        span{
                            color: @99;
                            font-size: 35px;
                        }
                    }
                }
            }



            //标题类
            .title{
                font-size: 25px;
                height: 2.8em;
                overflow: hidden;
                position: relative;
                text-indent: 1em;
                text-align: justify;
                .icon{
                    background-image: linear-gradient(to left ,rgba(255,255,255,1) 40%,rgba(255,255,255,0));
                    position: absolute;
                    width: 60px;
                    height: 60px;
                    right: 0px;
                    bottom: -20px;
                    text-align: right;
                    text-indent: 0;
                }
            }
            .bottom{
                margin-top:16px;
                position: relative;
                .price{
                    font-size: 35px;
                    font-weight: 600;                    
                }
                .follow{
                    position: absolute;
                    right: 0;
                    bottom: 3px;
                    span{
                        font-size: 30px;
                    }
                }
            }
        }
    }
</style>
